<template>
    <view>
        <div style="padding-top: 2px; display: flex;">
            <div style="width: 100%;">
                <u-search placeholder="请输入搜索关键词" v-model="searchKeyword" :focus="true" :show-action="false"></u-search>
            </div>
            <div style="width: 65px; padding-top: 6px; text-align: center; margin: 0px 10px;" @click="onSearchGoods()">
                搜商品
            </div>
            <div style="width: 65px; padding-top: 6px; text-align: center; margin: 0px 10px;" @click="onSearchStore()">
                搜店铺
            </div>
        </div>

        <div style="margin: 10px;" v-if="searchRecordGoodsList.length">
            <u-cell-item title="搜索商品历史" :arrow="false" :border-bottom="false">
                <u-icon slot="right-icon" size="32" name="trash" @click="clearSearchRecordGoodsList()"></u-icon>
            </u-cell-item>
            <u-button :size="'mini'" v-for="(item, index) in searchRecordGoodsList" :key="item" :custom-style="{margin: '4px'}"
                      @click="onClickGoodsRecord(item)">{{item}}
            </u-button>
        </div>
        <div style="margin: 10px;" v-if="searchRecordStoreList.length">
            <u-cell-item title="搜索店铺历史" :arrow="false" :border-bottom="false">
                <u-icon slot="right-icon" size="32" name="trash" @click="clearSearchRecordStoreList()"></u-icon>
            </u-cell-item>
            <u-button :size="'mini'" v-for="(item, index) in searchRecordStoreList" :key="item" :custom-style="{margin: '4px'}"
                      @click="onClickStoreRecord(item)">{{item}}
            </u-button>
        </div>
    </view>
</template>

<script>

    import {LocalStorageUtil} from "../../../dev/core/utils/local-storage.util";
    import {CommonUtil} from "../../../dev/core/utils/common.util";

    export default {
        data() {
            return {
                searchKeyword: '',
                searchRecordGoodsList: [],
                searchRecordStoreList: []
            }
        },
        onLoad(options) {
            const _self = this

        },
        methods: {
            onShow(options) {
                if (LocalStorageUtil.getItem('searchRecordGoodsList')) {
                    this.searchRecordGoodsList = LocalStorageUtil.getItem('searchRecordGoodsList').reverse()
                }
                if (LocalStorageUtil.getItem('searchRecordStoreList')) {
                    this.searchRecordStoreList = LocalStorageUtil.getItem('searchRecordStoreList').reverse()
                }
            },
            onSearchGoods() {
                this.searchKeyword = CommonUtil.trim(this.searchKeyword);
                if (this.searchKeyword === '') {
                    return
                }
                let list = []
                if (LocalStorageUtil.getItem('searchRecordGoodsList')) {
                    list = LocalStorageUtil.getItem('searchRecordGoodsList')
                }
                if (list.filter(item => item === this.searchKeyword).length) {
                    list = list.filter(item => item !== this.searchKeyword) // 过滤掉已存在的搜索记录
                }
                list.push(this.searchKeyword) // 添加搜索记录
                if (list.length > 25) { // 保留最近25个搜索记录
                    list.splice(0, 1)
                }
                LocalStorageUtil.setItem('searchRecordGoodsList', JSON.stringify(list));
                uni.navigateTo({
                    url: `/pages/common/search/search-result/index?timestamp=${new Date().getTime()}&searchKeyword=${this.searchKeyword}&type=0`
                })
            },
            onSearchStore() {
                this.searchKeyword = CommonUtil.trim(this.searchKeyword);
                if (this.searchKeyword === '') {
                    return
                }
                let list = []
                if (LocalStorageUtil.getItem('searchRecordStoreList')) {
                    list = LocalStorageUtil.getItem('searchRecordStoreList')
                }
                if (list.filter(item => item === this.searchKeyword).length) {
                    list = list.filter(item => item !== this.searchKeyword) // 过滤掉已存在的搜索记录
                }
                list.push(this.searchKeyword) // 添加搜索记录
                if (list.length > 25) { // 保留最近25个搜索记录
                    list.splice(0, 1)
                }
                LocalStorageUtil.setItem('searchRecordStoreList', JSON.stringify(list));
                uni.navigateTo({
                    url: `/pages/common/search/search-result/index?timestamp=${new Date().getTime()}&searchKeyword=${this.searchKeyword}&type=1`
                })
            },
            /**
             * 清除搜索历史
             */
            clearSearchRecordGoodsList() {
                this.searchRecordGoodsList = []
                LocalStorageUtil.removeItem('searchRecordGoodsList')
            },
            /**
             * 清除搜索历史
             */
            clearSearchRecordStoreList() {
                this.searchRecordStoreList = []
                LocalStorageUtil.removeItem('searchRecordStoreList')
            },
            /**
             * 点击搜索记录
             */
            onClickGoodsRecord(searchKeyword) {
                this.searchKeyword = searchKeyword;
                this.onSearchGoods();
            },
            /**
             * 点击搜索记录
             */
            onClickStoreRecord(searchKeyword) {
                this.searchKeyword = searchKeyword;
                this.onSearchStore();
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>
